<template>
  <div class="wrapper"  v-loading="loading"> 
    <!-- -->
    <h1>Search Github Users</h1>
    <div class="inp">
        <el-input v-model="keyWords" placeholder="请输入搜索关键字"/>
        <el-button  @click="getUserList()" type="success" plain>搜索</el-button>
    </div>
    <div class="box" >
        <div v-show="mes!==''">{{ mes }}</div>
        <TestItem :userList="userList"/>
    </div>
  </div>
</template>

<script>
import TestItem from '@/components/TestItem.vue'; 

export default {
  components: { TestItem },
  name: 'StaticComponent',
  data() {
    return {
      keyWords:"",
      userList:[],
      mesStatus:0,
      mes:"",
      loading:false
    };
  },

  mounted() {
    
  },

  methods: {
    getUserList(){
        this.loading=true
        this.userList=[]
        this.mesStatus=1
        let url = "https://api.github.com/search/users?q="+this.keyWords
        this.$http.get(url)
        .then(res => {
            this.loading=false
            this.mesStatus=2
            this.userList = res.data.items;
        })
        .catch(err => {
            this.mes=err.message 
            setTimeout(()=>{
                this.loading=false
            },2000)
        })
    }
  },

  watch:{
    mesStatus:{
        immediate:true,
        handler(newVal,oldVal){
            switch (newVal) {
            case 0:
                this.mes= "欢迎检索"
                break;
            case 1:
                this.mes= "加载中"
                break;
            default:
                this.mes= '';
                break;
        }
        }
    }
  }
};
</script>

<style>
.wrapper{
            margin: 0 auto;
            width: 980px;
        }
        .box{
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
        }
        .box .item{
            width: 162px;
            height: 162px;
            border: 1px solid orange;
            border-right: 0;
        }
        .box .item:nth-child(6n){
            border-right: 1px solid orange;
        }

        .box .item:nth-child(n+7){
            border-top: 0;
        }
        .box .item:last-child{
            border-right: 1px solid orange;
        }
        .box .item img{
            width: 162px;
            height: 162px;
        }
        .inp{
            display: flex;
        }
</style>